<template>
    <div class="container">
        <el-popover :show-arrow="false" :width="200" trigger="hover">
            <div class="popover-container">
                <div class="userInfo">
                    <span>{{ user.userName }}</span>
                </div>
                <div class="btn" @click="Changepwd()">
                    <el-icon>
                        <Lock />
                    </el-icon>
                    <span>修改密码</span>
                    <el-icon :size="12">
                        <ArrowRightBold />
                        
                    </el-icon>
                </div>
                <el-divider style="margin:10px;" />
                <div class="btn" @click="back">
                    <el-icon>
                        <CircleClose />
                    </el-icon>
                    <span >退出登录</span>
                    <el-icon :size="12">
                        <ArrowRightBold />
                    </el-icon>
                </div>
            </div>


            <template #reference>
                <div class="card">
                    <el-avatar :size="38" src="http://localhost:5099/wwwroot/images/240809040629945995.jpg" />
                </div>
            </template>
        </el-popover>
        <el-dialog v-model="dialogAddVisible" title="修改密码" width="600" draggable>
     		<Change @onSave="closePwd" v-if="dialogAddVisible"></Change>
     	</el-dialog>
    </div>
    
</template>

<script setup lang="ts">
import { Lock, ArrowRight, CircleClose } from '@element-plus/icons-vue'
import { useUserStore } from '../store/user';
import {ref} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    useRouter
} from 'vue-router'

import Change from '../components/ChangePwd.vue';
const dialogAddVisible = ref(false);
const userStore = useUserStore()
const user: any = userStore.user
const router = useRouter();
const back = () => {
    console.log("1111")
    ElMessageBox.confirm(
        '确认要退出吗?',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            router.push({ path: '/login' })
        })

}

const Changepwd = () => {
	dialogAddVisible.value = !dialogAddVisible.value
}
const closePwd = (flag: boolean) => {
	//关闭弹窗
	dialogAddVisible.value = !dialogAddVisible.value
}
</script>

<style scoped>
.container {}

.userInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
}

.userInfo>span {
    font-size: 16px;
    font-weight: 500;
    color: black;
}

.btn {
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    color: #61666d;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    min-width: 150;
}

.btn>span {
    margin-left: 1rem;
}

.btn>:last-child {
    flex-grow: 1;
    justify-content: flex-end;
}

.btn:hover {
    background-color: #e3e5e7;
}
</style>